<template>
	<div class="personnel-data">
		<!-- 人员统计卡片 -->
		<div class="personnel-stats">
			<div class="stats-card" v-for="(stat, index) in personnelStats" :key="index" :class="[getCardClass(stat.label), { loading: isStatsLoading }]">
				<div v-if="!isStatsLoading" class="stats-icon">
					<el-icon><component :is="getCardIcon(stat.label)" /></el-icon>
				</div>
				<div v-else class="stats-icon loading-icon">
					<div class="loading-spinner"></div>
				</div>
				<div class="stats-content">
					<div class="stats-number">
						<span v-if="!isStatsLoading">{{ stat.value }}</span>
						<div v-else class="loading-skeleton loading-number"></div>
					</div>
					<div class="stats-label">
						<span v-if="!isStatsLoading">{{ stat.label }}</span>
						<div v-else class="loading-skeleton loading-text"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 统计日期 -->
		<div class="stats-date">统计日期: {{ currentDate }}</div>

		<!-- 图表展示 -->
		<div class="charts-section">
			<div class="charts-row">
				<div class="chart-container" :class="{ loading: isChartsLoading }">
					<div class="chart-header">
						<div class="chart-title">
							<i class="chart-icon age-icon"></i>
							<span>人员年龄分布</span>
						</div>
					</div>
					<div class="chart-wrapper">
						<div v-if="!isChartsLoading" ref="ageDistributionChart" class="chart"></div>
						<div v-else class="chart-loading">
							<div class="chart-loading-spinner"></div>
							<div class="chart-loading-text">数据加载中...</div>
						</div>
					</div>
				</div>
				<div class="chart-container" :class="{ loading: isChartsLoading }">
					<div class="chart-header">
						<div class="chart-title">
							<i class="chart-icon status-icon"></i>
							<span>员工状态分布</span>
						</div>
					</div>
					<div class="chart-wrapper">
						<div v-if="!isChartsLoading" ref="employeeStatusChart" class="chart"></div>
						<div v-else class="chart-loading">
							<div class="chart-loading-spinner"></div>
							<div class="chart-loading-text">数据加载中...</div>
						</div>
					</div>
				</div>
			</div>
			<div class="charts-row">
				<div class="chart-container" :class="{ loading: isChartsLoading }">
					<div class="chart-header">
						<div class="chart-title">
							<i class="chart-icon education-icon"></i>
							<span>学历分布</span>
						</div>
					</div>
					<div class="chart-wrapper">
						<div v-if="!isChartsLoading" ref="educationChart" class="chart"></div>
						<div v-else class="chart-loading">
							<div class="chart-loading-spinner"></div>
							<div class="chart-loading-text">数据加载中...</div>
						</div>
					</div>
				</div>
				<div class="chart-container" :class="{ loading: isChartsLoading }">
					<div class="chart-header">
						<div class="chart-title">
							<i class="chart-icon gender-icon"></i>
							<span>性别分布</span>
						</div>
					</div>
					<div class="chart-wrapper">
						<div v-if="!isChartsLoading" ref="genderChart" class="chart"></div>
						<div v-else class="chart-loading">
							<div class="chart-loading-spinner"></div>
							<div class="chart-loading-text">数据加载中...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="PersonnelData">
import { ref, onMounted, onUnmounted } from 'vue';
import { Lightning, User, CircleCheck, Warning, Sunny } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { PersonnelApi, type IPersonnelStatsData, type IPieChartData } from '../../../api/personnel';

// 响应式数据
const ageDistributionChart = ref<HTMLElement>();
const employeeStatusChart = ref<HTMLElement>();
const educationChart = ref<HTMLElement>();
const genderChart = ref<HTMLElement>();
let ageDistributionInstance: echarts.ECharts | null = null;
let employeeStatusInstance: echarts.ECharts | null = null;
let educationInstance: echarts.ECharts | null = null;
let genderInstance: echarts.ECharts | null = null;

// 加载状态
const isStatsLoading = ref(true);
const isChartsLoading = ref(true);

// ======= 常量配置 =======
// 统计数据配置
const STATS_CONFIG = [
	{ key: '在职员工数量' as keyof IPersonnelStatsData, label: '在职人数' },
	{ key: '试用期员工数量' as keyof IPersonnelStatsData, label: '试用期人数' },
	{ key: '待入职员工数量' as keyof IPersonnelStatsData, label: '待入职人数' },
	{ key: '待离职员工数量' as keyof IPersonnelStatsData, label: '待离职人数' },
	{ key: '待退休员工数量' as keyof IPersonnelStatsData, label: '待退休人数' },
] as const;

// ======= 响应式数据 =======
const personnelStats = ref<Array<{ label: string; value: string }>>(
	// 初始化占位数据，确保loading期间有卡片显示
	STATS_CONFIG.map((config) => ({ label: config.label, value: '0人' }))
);
const ageDistributionData = ref<Array<{ name: string; value: number; percentage: string }>>([]);
const employeeStatusData = ref<Array<{ name: string; value: number; percentage: string }>>([]);
const educationData = ref<Array<{ name: string; value: number; percentage: string }>>([]);
const genderData = ref<Array<{ name: string; value: number; percentage: string }>>([]);

// 当前日期
const currentDate = ref(new Date().toISOString().split('T')[0]);

// 数据转换工具函数
const transformChartData = (data: { [key: string]: number }) => {
	const total = Object.values(data).reduce((sum, value) => sum + value, 0);
	return Object.entries(data).map(([key, value]) => ({
		name: key,
		value: value,
		percentage: total > 0 ? `${((value / total) * 100).toFixed(1)}%` : '0%',
	}));
};

// 图表配置
const CHART_CONFIGS = [
	{
		key: '员工年龄分布' as keyof IPieChartData,
		data: ageDistributionData,
		instance: () => ageDistributionInstance,
		init: () => initAgeDistributionChart(),
	},
	{
		key: '最高学历分布' as keyof IPieChartData,
		data: educationData,
		instance: () => educationInstance,
		init: () => initEducationChart(),
	},
	{
		key: '在职状态分布' as keyof IPieChartData,
		data: employeeStatusData,
		instance: () => employeeStatusInstance,
		init: () => initEmployeeStatusChart(),
	},
	{
		key: '员工性别分布' as keyof IPieChartData,
		data: genderData,
		instance: () => genderInstance,
		init: () => initGenderChart(),
	},
] as const;

// 初始化年龄分布饼图
const initAgeDistributionChart = () => {
	if (!ageDistributionChart.value) return;

	// 检测当前主题
	const isDark = document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark';

	ageDistributionInstance = echarts.init(ageDistributionChart.value);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c}人 ({d}%)',
			backgroundColor: isDark ? '#191919' : '#ffffff',
			borderColor: isDark ? '#333333' : '#e4e7ed',
			borderWidth: 1,
			textStyle: {
				color: isDark ? '#dadada' : '#303133',
				fontSize: 12,
				fontWeight: 400,
			},
			extraCssText: 'border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);',
		},
		legend: {
			orient: 'vertical',
			left: '5%',
			top: 'middle',
			itemGap: 8,
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
				fontSize: 12,
				color: isDark ? '#9b9da1' : '#606266',
				fontWeight: 400,
			},
			formatter: (name: string) => {
				const item = ageDistributionData.value.find((d) => d.name === name);
				return `${name}  ${item?.percentage || ''}`;
			},
		},
		series: [
			{
				name: '年龄分布',
				type: 'pie',
				radius: ['35%', '65%'],
				center: ['65%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 2,
					borderColor: isDark ? '#191919' : '#ffffff',
					borderWidth: 1,
				},
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: false,
					},
					itemStyle: {
						borderRadius: 4,
					},
				},
				labelLine: {
					show: false,
				},
				data: ageDistributionData.value.map((item) => ({
					name: item.name,
					value: item.value,
				})),
			},
		],
		color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#34c759', '#5856d6', '#ff9f0a'],
	};

	ageDistributionInstance.setOption(option);
};

// 初始化员工状态分布饼图
const initEmployeeStatusChart = () => {
	if (!employeeStatusChart.value) return;

	// 检测当前主题
	const isDark2 = document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark';

	employeeStatusInstance = echarts.init(employeeStatusChart.value);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c}人 ({d}%)',
			backgroundColor: isDark2 ? '#191919' : '#ffffff',
			borderColor: isDark2 ? '#333333' : '#e4e7ed',
			borderWidth: 1,
			textStyle: {
				color: isDark2 ? '#dadada' : '#303133',
				fontSize: 12,
				fontWeight: 400,
			},
			extraCssText: 'border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);',
		},
		legend: {
			orient: 'vertical',
			left: '5%',
			top: 'middle',
			itemGap: 8,
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
				fontSize: 12,
				color: isDark2 ? '#9b9da1' : '#606266',
				fontWeight: 400,
			},
			formatter: (name: string) => {
				const item = employeeStatusData.value.find((d) => d.name === name);
				return `${name}  ${item?.percentage || ''}`;
			},
		},
		series: [
			{
				name: '员工状态',
				type: 'pie',
				radius: '55%',
				center: ['65%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 2,
					borderColor: isDark2 ? '#191919' : '#ffffff',
					borderWidth: 1,
				},
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: false,
					},
					itemStyle: {
						borderRadius: 4,
					},
				},
				labelLine: {
					show: false,
				},
				data: employeeStatusData.value.map((item) => ({
					name: item.name,
					value: item.value,
				})),
			},
		],
		color: ['#67c23a', '#e6a23c', '#909399'],
	};

	employeeStatusInstance.setOption(option);
};

// 初始化学历分布饼图
const initEducationChart = () => {
	if (!educationChart.value) return;

	// 检测当前主题
	const isDark3 = document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark';

	educationInstance = echarts.init(educationChart.value);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c}人 ({d}%)',
			backgroundColor: isDark3 ? '#191919' : '#ffffff',
			borderColor: isDark3 ? '#333333' : '#e4e7ed',
			borderWidth: 1,
			textStyle: {
				color: isDark3 ? '#dadada' : '#303133',
				fontSize: 12,
				fontWeight: 400,
			},
			extraCssText: 'border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);',
		},
		legend: {
			orient: 'vertical',
			left: '5%',
			top: 'middle',
			itemGap: 8,
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
				fontSize: 12,
				color: isDark3 ? '#9b9da1' : '#606266',
				fontWeight: 400,
			},
			formatter: (name: string) => {
				const item = educationData.value.find((d) => d.name === name);
				return `${name}  ${item?.percentage || ''}`;
			},
		},
		series: [
			{
				name: '学历分布',
				type: 'pie',
				radius: '55%',
				center: ['65%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 2,
					borderColor: isDark3 ? '#191919' : '#ffffff',
					borderWidth: 1,
				},
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: false,
					},
					itemStyle: {
						borderRadius: 4,
					},
				},
				labelLine: {
					show: false,
				},
				data: educationData.value.map((item) => ({
					name: item.name,
					value: item.value,
				})),
			},
		],
		color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399'],
	};

	educationInstance.setOption(option);
};

// 初始化性别分布饼图
const initGenderChart = () => {
	if (!genderChart.value) return;

	// 检测当前主题
	const isDark = document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark';

	genderInstance = echarts.init(genderChart.value);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c}人 ({d}%)',
			backgroundColor: isDark ? '#191919' : '#ffffff',
			borderColor: isDark ? '#333333' : '#e4e7ed',
			borderWidth: 1,
			textStyle: {
				color: isDark ? '#dadada' : '#303133',
				fontSize: 12,
				fontWeight: 400,
			},
			extraCssText: 'border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);',
		},
		legend: {
			orient: 'vertical',
			left: '5%',
			top: 'middle',
			itemGap: 8,
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
				fontSize: 12,
				color: isDark ? '#9b9da1' : '#606266',
				fontWeight: 400,
			},
			formatter: (name: string) => {
				const item = genderData.value.find((d) => d.name === name);
				return `${name}  ${item?.percentage || ''}`;
			},
		},
		series: [
			{
				name: '性别分布',
				type: 'pie',
				radius: '55%',
				center: ['65%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 2,
					borderColor: isDark ? '#191919' : '#ffffff',
					borderWidth: 1,
				},
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: false,
					},
					itemStyle: {
						borderRadius: 4,
					},
				},
				labelLine: {
					show: false,
				},
				data: genderData.value.map((item) => ({
					name: item.name,
					value: item.value,
				})),
			},
		],
		color: ['#409eff', '#f56c6c', '#909399'],
	};

	genderInstance.setOption(option);
};

// 加载人员统计数据
const loadPersonnelStats = async () => {
	try {
		isStatsLoading.value = true;
		const data = (await PersonnelApi.getPersonnelStats()) as unknown as IPersonnelStatsData;

		personnelStats.value = STATS_CONFIG.map((config) => ({
			label: config.label,
			value: `${data[config.key] || 0}人`,
		}));

		// 小延迟确保用户能看到loading效果
		await new Promise((resolve) => setTimeout(resolve, 300));
	} catch (error) {
		console.error('获取人员统计数据失败:', error);
		personnelStats.value = STATS_CONFIG.map((config) => ({
			label: config.label,
			value: '0人',
		}));
	} finally {
		isStatsLoading.value = false;
	}
};

// 加载饼图数据
const loadPieChartData = async () => {
	try {
		isChartsLoading.value = true;
		const data = (await PersonnelApi.getPieChartData()) as unknown as IPieChartData;

		// 处理所有图表数据
		CHART_CONFIGS.forEach((config) => {
			if (data[config.key]) {
				config.data.value = transformChartData(data[config.key]);
			}
		});

		// 小延迟确保用户能看到loading效果
		await new Promise((resolve) => setTimeout(resolve, 200));

		// 设置loading为false，然后初始化图表
		isChartsLoading.value = false;

		// 延迟初始化图表，确保DOM已更新
		setTimeout(() => {
			CHART_CONFIGS.forEach((config) => config.init());
		}, 100);
	} catch (error) {
		console.error('获取饼图数据失败:', error);
		isChartsLoading.value = false;
	}
};

// 卡片样式和图标配置
const CARD_CLASS_MAP = {
	在职人数: 'stats-card-success',
	试用期人数: 'stats-card-primary',
	待入职人数: 'stats-card-info',
	待离职人数: 'stats-card-warning',
	待退休人数: 'stats-card-info',
} as const;

const CARD_ICON_MAP = {
	在职人数: CircleCheck,
	试用期人数: User,
	待入职人数: Lightning,
	待离职人数: Warning,
	待退休人数: Sunny,
} as const;

// 获取卡片样式类
const getCardClass = (label: string) => {
	return CARD_CLASS_MAP[label as keyof typeof CARD_CLASS_MAP] || 'stats-card-primary';
};

// 获取卡片图标
const getCardIcon = (label: string) => {
	return CARD_ICON_MAP[label as keyof typeof CARD_ICON_MAP] || User;
};

// 监听窗口大小变化
const handleResize = () => {
	CHART_CONFIGS.forEach((config) => {
		const instance = config.instance();
		if (instance) {
			instance.resize();
		}
	});
};

// 监听主题变化
let observer: MutationObserver | null = null;
const handleThemeChange = () => {
	CHART_CONFIGS.forEach((config) => {
		const instance = config.instance();
		if (instance) {
			instance.dispose();
			config.init();
		}
	});
};

onMounted(async () => {
	// 加载数据
	await Promise.all([loadPersonnelStats(), loadPieChartData()]);

	window.addEventListener('resize', handleResize);

	// 监听主题变化
	observer = new MutationObserver(handleThemeChange);
	observer.observe(document.documentElement, {
		attributes: true,
		attributeFilter: ['data-theme'],
	});
});

onUnmounted(() => {
	window.removeEventListener('resize', handleResize);
	if (observer) {
		observer.disconnect();
	}
	// 销毁所有图表实例
	CHART_CONFIGS.forEach((config) => {
		const instance = config.instance();
		if (instance) {
			instance.dispose();
		}
	});
});
</script>

<style scoped>
/* =============== 人员数据模块 - 简约大气设计 =============== */
.personnel-data {
	width: 100%;
	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* =============== 人员统计卡片组 =============== */
.personnel-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--home-module-gap);
	margin-bottom: var(--home-module-gap-large);
}

/* 统计卡片基础样式 */
.stats-card {
	background: var(--home-bg-primary);
	border: 1px solid var(--home-border-extra-light);
	border-radius: var(--home-radius-lg);
	padding: var(--home-spacing-xl) var(--home-spacing-xxl);
	display: flex;
	align-items: center;
	gap: var(--home-spacing-xl);
	transition: var(--home-transition-base);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: var(--home-shadow-light);
}

/* 简约顶部装饰线 */
.stats-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.stats-card:hover {
	transform: translateY(-1px);
	box-shadow: var(--home-shadow-medium);
	border-color: var(--home-border-light);
}

.stats-card:hover::before {
	opacity: 0.8;
}

/* 卡片主题色彩 - 基于项目色彩系统 */
.stats-card-primary {
	--stats-color: var(--home-primary);
	--stats-bg: var(--home-primary-lightest);
	color: var(--stats-color);
}

.stats-card-success {
	--stats-color: var(--home-success);
	--stats-bg: var(--home-success-lightest);
	color: var(--stats-color);
}

.stats-card-warning {
	--stats-color: var(--home-warning);
	--stats-bg: var(--home-warning-lightest);
	color: var(--stats-color);
}

.stats-card-info {
	--stats-color: var(--home-info);
	--stats-bg: var(--home-info-lightest);
	color: var(--stats-color);
}

/* 图标容器 - 简约设计 */
.stats-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--home-radius-lg);
	background: var(--stats-bg);
	color: var(--stats-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--home-transition-base);
}

.stats-card:hover .stats-icon {
	transform: scale(1.05);
}

.stats-icon .el-icon {
	font-size: 20px;
}

/* 内容区域 */
.stats-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--home-spacing-sm);
}

.stats-number {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--stats-color);
	font-family: 'Helvetica Neue', 'Arial', sans-serif;
	letter-spacing: -0.5px;
}

.stats-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--home-text-secondary);
	line-height: 1.4;
}

/* 统计日期 */
.stats-date {
	text-align: right;
	font-size: 12px;
	color: var(--home-text-placeholder);
	margin-bottom: var(--home-module-gap);
	font-weight: 400;
}

/* =============== 图表展示区域 =============== */
.charts-section {
	margin-top: var(--home-module-gap);
}

.charts-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--home-module-gap);
	margin-bottom: var(--home-module-gap);
}

.charts-row:last-child {
	margin-bottom: 0;
}

/* 图表容器 */
.chart-container {
	background: var(--home-bg-primary);
	border: 1px solid var(--home-border-extra-light);
	border-radius: var(--home-radius-lg);
	box-shadow: var(--home-shadow-light);
	transition: var(--home-transition-base);
	position: relative;
	overflow: hidden;
	min-height: 420px;
}

/* 简约装饰线 */
.chart-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--home-primary), var(--home-primary-light));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.chart-container:hover {
	box-shadow: var(--home-shadow-medium);
	border-color: var(--home-border-light);
	transform: translateY(-2px);
}

.chart-container:hover::before {
	opacity: 1;
}

/* 图表头部 */
.chart-header {
	padding: var(--home-spacing-xl) var(--home-spacing-xxl) var(--home-spacing-lg);
	border-bottom: 1px solid var(--home-border-extra-light);
	background: linear-gradient(135deg, rgba(64, 158, 255, 0.02), rgba(64, 158, 255, 0.01));
}

/* 图表标题 */
.chart-title {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-md);
	font-size: 16px;
	font-weight: 600;
	color: var(--home-text-primary);
	letter-spacing: 0.3px;
}

/* 图表图标 */
.chart-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
}

.age-icon {
	background: linear-gradient(135deg, #409eff, #66b1ff);
}

.status-icon {
	background: linear-gradient(135deg, #67c23a, #95d475);
}

.education-icon {
	background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.gender-icon {
	background: linear-gradient(135deg, #f56c6c, #f78989);
}

.chart-icon::before {
	content: '●';
}

/* =============== Loading 样式 =============== */
/* 统计卡片Loading */
.stats-card.loading {
	pointer-events: none;
	opacity: 0.8;
}

.loading-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--home-border-light);
	border-top: 2px solid var(--stats-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s ease-in-out infinite;
	border-radius: 4px;
}

.loading-number {
	height: 28px;
	width: 80px;
	margin-bottom: 8px;
}

.loading-text {
	height: 14px;
	width: 60px;
}

/* 图表Loading */
.chart-container.loading {
	pointer-events: none;
}

.chart-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: var(--home-spacing-lg);
}

.chart-loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--home-border-light);
	border-top: 3px solid var(--home-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.chart-loading-text {
	font-size: 14px;
	color: var(--home-text-secondary);
	font-weight: 500;
}

/* Loading 动画 */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes skeleton-loading {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* 图表容器 */
.chart-wrapper {
	position: relative;
	width: 100%;
	height: 320px;
	padding: var(--home-spacing-xl) var(--home-spacing-lg);
}

.chart {
	width: 100%;
	height: 100%;
}

/* =============== 响应式设计 =============== */
@media (max-width: 1200px) {
	.personnel-stats {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--home-module-gap-small);
	}

	.stats-card {
		padding: var(--home-spacing-lg) var(--home-spacing-xl);
	}

	.stats-icon {
		width: 44px;
		height: 44px;
	}

	.stats-icon .el-icon {
		font-size: 18px;
	}

	.stats-number {
		font-size: 24px;
	}

	.charts-row {
		grid-template-columns: 1fr 1fr;
		gap: var(--home-module-gap-small);
	}

	.chart-container {
		min-height: 380px;
	}

	.chart-wrapper {
		height: 280px;
		padding: var(--home-spacing-lg);
	}
}

@media (max-width: 768px) {
	.personnel-stats {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--home-module-gap-small);
	}

	.stats-card {
		padding: var(--home-spacing-lg);
		gap: var(--home-spacing-lg);
	}

	.stats-icon {
		width: 40px;
		height: 40px;
	}

	.stats-icon .el-icon {
		font-size: 16px;
	}

	.stats-number {
		font-size: 22px;
	}

	.stats-label {
		font-size: 13px;
	}

	.charts-row {
		grid-template-columns: 1fr;
		gap: var(--home-module-gap-small);
	}

	.chart-container {
		min-height: 350px;
	}

	.chart-wrapper {
		height: 240px;
		padding: var(--home-spacing-md);
	}

	.chart-header {
		padding: var(--home-spacing-lg);
	}

	.chart-title {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.personnel-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--home-spacing-lg);
	}

	.stats-card {
		padding: var(--home-spacing-lg);
		flex-direction: column;
		text-align: center;
		gap: var(--home-spacing-lg);
	}

	.stats-icon {
		width: 36px;
		height: 36px;
	}

	.stats-icon .el-icon {
		font-size: 14px;
	}

	.stats-number {
		font-size: 20px;
	}

	.stats-label {
		font-size: 12px;
	}

	.charts-row {
		grid-template-columns: 1fr;
		gap: var(--home-spacing-lg);
	}

	.chart-container {
		min-height: 320px;
	}

	.chart-wrapper {
		height: 200px;
		padding: var(--home-spacing-sm);
	}

	.chart-header {
		padding: var(--home-spacing-md);
	}

	.chart-title {
		font-size: 14px;
		gap: var(--home-spacing-sm);
	}

	.chart-icon {
		width: 16px;
		height: 16px;
		font-size: 10px;
	}
}

/* =============== 暗黑模式适配 =============== */
[data-theme='dark'] .personnel-data {
	/* 暗色模式下的卡片样式 */
	.stats-card {
		background: var(--home-bg-primary);
		border-color: var(--home-border-extra-light);
		box-shadow: var(--home-shadow-light);
	}

	.stats-card:hover {
		box-shadow: var(--home-shadow-medium);
		border-color: var(--home-border-light);
	}

	.stats-label {
		color: var(--home-text-secondary);
	}

	.stats-date {
		color: var(--home-text-placeholder);
	}

	.stats-number {
		color: var(--stats-color);
	}

	/* 图表容器暗色模式 */
	.chart-container {
		background: var(--home-bg-primary);
		border-color: var(--home-border-extra-light);
		box-shadow: var(--home-shadow-light);
	}

	.chart-container:hover {
		box-shadow: var(--home-shadow-medium);
		border-color: var(--home-border-light);
	}

	.chart-title {
		color: var(--home-text-primary);
	}

	/* 暗色模式下的主题色彩调整 */
	.stats-card-primary {
		--stats-bg: rgba(64, 158, 255, 0.1);
		--stats-color: #66b1ff;
	}

	.stats-card-success {
		--stats-bg: rgba(103, 194, 58, 0.1);
		--stats-color: #95d475;
	}

	.stats-card-warning {
		--stats-bg: rgba(230, 162, 60, 0.1);
		--stats-color: #ebb563;
	}

	.stats-card-info {
		--stats-bg: rgba(144, 147, 153, 0.1);
		--stats-color: #a6a9ad;
	}

	/* 暗色模式下的Loading样式 */
	.loading-skeleton {
		background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
		background-size: 200% 100%;
	}

	.chart-loading-text {
		color: var(--home-text-secondary);
	}
}
</style>
